<template>
	<view>
		<view class="page-mine flex flex-column">
			<view class="headerbox flex align-center">
				<view><image :src="userinfo.avatar" mode="scaleToFill"  @click="handleCellClick"/></view>
				<view class="flex flex-column mgl-20">
					<view>{{ userinfo.username }}</view>
					<view>{{ userinfo.mobile }}</view>
				</view>
			</view>
			<!-- <view class="pdx-30 seetingcontainer mgt-40">
				<u-cell-group :border="false">
					<u-cell
						v-for="(cell, index) in list"
						:value="cell.value"
						:key="index"
						:title="cell.label"
						@click="handleCellClick(cell)"
						isLink
					>
						<u-icon :name="cell.icon"></u-icon>
					</u-cell>
				</u-cell-group>
			</view> -->
			<view class="pdx-30 bottombtn">
				<u-button shape="circle" @click="login" text="退出登录" type="primary" size="large"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { imgurl } from '@/utils/constant.js'
import { getuserinfo } from '@/api/api.js'
export default {
	data() {
		return {
			imgurl: imgurl,
			userinfo: {},
			list: [
				{
					icon: 'edit-pen',
					label: '修改信息',
					url: '/pages/mine/modify'
				}
			]
		}
	},
	onLoad() {
		this.getUser()
	},
	methods: {
		login() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		async getUser() {
			const res = await getuserinfo()
			this.userinfo = res.data
		},
		handleCellClick() {
			uni.navigateTo({
				url: '/pages/mine/modify'
			})
		}
	}
}
</script>

//
<style lang="scss">
// @import '@/app/mixins.scss';
// .page-mine {
// 	@include bgImage('@/static/images/home/background.png');
// 	background-size: 750rpx 440rpx;
// 	box-sizing: border-box;
// 	padding-top: 200rpx;
// }
//
</style>
<style lang="scss">
.page-mine {
	.headerbox {
		width: 100%;
		height: 300rpx;
		background-color: #3c9cff;
		color: #fff;
		padding-left: 30rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}
	}
	.seetingcontainer {
		background: #fff;
		/deep/ .u-cell {
			&:last-child {
				.u-line {
					display: none;
				}
			}
			.u-cell__body {
				padding: 24rpx 0 !important;
			}
			.u-cell__left-icon-wrap {
				margin-right: 20rpx;
			}
		}
	}
	.bottombtn {
		position: absolute;
		bottom: 30rpx;
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;
	}
}
</style>
